<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes"> 
		<meta content="telephone=no,email=no" name="format-detection" />
        <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
		
		<title>羊仓健康生活家</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/flexible.js" ></script>
		<script type="text/javascript" src="js/swiper.min.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		
	</head>
	<body>
		<div class="warp">
			<!-- 轮播开始  -->
		<div class="swiper">
			<div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<a href="html/xiangqingye.html">
		            		<img src="img/01.png">
		            	</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="html/xiangqingye.html">
		            		<img src="img/01.png">
		            	</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="html/xiangqingye.html">
		            		<img src="img/01.png">
		            	</a>
		            </div>
		           
		        </div>
		        <!-- Add Pagination -->
		        <div class="swiper-pagination"></div>
		        <!-- Add Arrows -->
		        <!--<div class="swiper-button-next"></div>-->
		        <!--<div class="swiper-button-prev"></div>-->
		    </div>
		</div>		    
		<!-- 轮播结束 -->
		<!--无缝滚动开始-->
		<div id="demo" class="qimo8">
	  <div class="qimo">
	    <div id="demo1">
	      <ul>
	        <li><a href='' >羊仓公告：所有商品一律65折！</a></li>
	        <li><a href='' >羊仓公告：所有商品一律65折！</a></li>
			
	      </ul>
	    </div>
	    <div id="demo2"></div>
	  </div>
	</div>
		<!--无缝滚动结束-->
		<!--活动开始-->
		<div class="activ">
			<div class="aleft">
			<div class="activ-left">
				<div class="left-txt">
					<p>富硒产品</p>
				</div>
				<a href="">
					<img src="img/02.png">
				</a>
			</div>
			</div>
			<div class="aright">
			<div class="activ-right">
				<div class="right-txt">
					<p>每日优礼</p>
				</div>
				<a href="">
					<img src="img/03.png">
				</a>
			</div>
			</div>
			
		</div>
		<!--活动结束-->
		<!--限时购开始-->
		<div id="content">
			<div class="timeshop">
				<p>限时购</p>
			</div>
			<div class="timer">
				<div class="left-boder"></div>
				<div class="time-item">
					<!--<span id="day_show">0天</span>-->
					<strong id="hour_show"></strong>
					<span>:</span>
					<strong id="minute_show"></strong>
					<span>:</span>
					<strong id="second_show"></strong>
				</div>
				<div class="right-boder"></div>
			</div>
			<div class="txt">
				<div class="t-left">
					<div class="cont-img">
						<a href=""><img src="img/04.png" ></a>
					</div>
				</div>
				<div class="t-right">
					<div class="cont-tit">
						<h3>午茶夫人养甘菊香柚绿菜</h3>
						<h4>源自台湾纯天然原装进口</h4>
						<p><span class="hour">限时价</span><span class="Price">￥19:00</span><span class="yprice">原价<s>￥59:00</s></span></p>
						<button class="btn">
							<p>马上抢</p>
						</button>
					</div>
				</div>	
			</div>
		</div>
		<!--限时购结束-->
		<!--精选商品开始-->
			<div class="Select">
				<div class="s-tit">
					<p>精选商品</p>
				</div>
				<div class="s-img">
					<div class="s-left">
					<div class="img-left">
						<div class="img">
							<img src="img/05.png">
						</div>
						<div class="img-text">
							<p>天然营养富硒鸡蛋 年卡 30枚/月*12月</p>
						</div>
						<div class="img-text1">
							<p>￥2376.00</p>
						</div>
					</div>
					</div>
					<div class="s-right">
					<div class="img-right">
						<div class="img">
							<img src="img/06.png">
						</div>
						<div class="img-text">
							<p>天然营养富硒鸡蛋 年卡 30枚装 礼盒</p>
						</div>
						<div class="img-text1">
							<p>￥49.00</p>
						</div>
					</div>
					</div>
				</div>
			</div>
		<!--精选商品结束-->
		<!--推荐商品开始-->
			<div class="container">
				<div class="r-tit">
					<p>推荐商品</p>
				</div>				
				<div id="container"> 					
				        <div class="box">		                
			                <div class="box_img">                        
			                    <img src="img/07.png" alt="">
			                </div>
			                <div class="img-text">
							<p>芭露黑巧克力涂层焦糖海盐味棉花糖</p>
						</div>
						<div class="img-text1">
							<p>￥49.00</p>
						</div>
				       </div>				       
				       <div class="box">		                
			                <div class="box_img">                        
			                    <img src="img/08.png" alt="">
			                </div>
			                <div class="img-text">
							<p>Ocelot奥斯洛黑巧克力 Hebridean海盐味</p>
						</div>
						<div class="img-text1">
							<p>￥99.00</p>
						</div>
				       </div>		       	
				        <div class="box">		                
			                <div class="box_img">                        
			                    <img src="img/09.png" alt="">
			                </div>
			                <div class="img-text">
							<p>巧克力与爱巴拿马80%可可含量</p>
						</div>
						<div class="img-text1">
							<p>￥79.00</p>
						</div>
				       </div>
				       
				       <div class="box">		                
			                <div class="box_img">                        
			                    <img src="img/10.png" alt="">
			                </div>
			                <div class="img-text">
							<p>植者丹麦进口薄荷绿茶包便携带滤袋</p>
						</div>
						<div class="img-text1">
							<p>￥29.00</p>
						</div>
				       </div>  
    			</div>				
			</div>
		<!--推荐商品结束-->
		<!--底导航开始-->
			<div id="nav">
				<ul class="nav-ul">
					<li><a href="index.html"><img src="img/01—.png"><p style="color:#007234">首页</p></a></li>
					<li><a href="xsg.html"><img src="img/2.png"><p>限时购</p></a></li>
					<li><a href="mryx.html"><img src="img/3.png"><p>每日优选</p></a></li>
					<li><a href="gwc.html"><img src="img/4.png"><p>购物车</p></a></li>
					<li><a href="my.html"><img src="img/5.png"><p>我的</p></a></li>
				</ul>
			</div>
		<!--底导航开始-->
		</div>
	</body>
	<!-- Swiper  Js -->
	<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    </script>
    <!--无缝滚动结束-->
 <script type="text/javascript">
		var demo = document.getElementById("demo");
		var demo1 = document.getElementById("demo1");
		var demo2 = document.getElementById("demo2");
		demo2.innerHTML=document.getElementById("demo1").innerHTML;
		function Marquee(){
		if(demo.scrollLeft-demo2.offsetWidth>=0){
		 demo.scrollLeft-=demo1.offsetWidth;
		}
		else{
		 demo.scrollLeft++;
		}
		}
		var myvar=setInterval(Marquee,30);
		demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
		demo.onmouseover=function(){clearInterval(myvar);}
	</script>
	<!--倒计时-->
	<script type="text/javascript">

var intDiff = parseInt(20);//倒计时总秒数量

function timer(intDiff){
	window.setInterval(function(){
	var day=0,
		hour=0,
		minute=0,
		second=0;//时间默认值		
	if(intDiff > 0){
//		day = Math.floor(intDiff / (60 * 60 * 24));
		hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
		minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
		second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
	}
	if (hour <= 9) hour = '0' + hour;
	if (minute <= 9) minute = '0' + minute;
	if (second <= 9) second = '0' + second;
//	$('#day_show').html(day+"天");
	$('#hour_show').html('<s id="h"></s>'+hour+'');
	$('#minute_show').html('<s></s>'+minute+'');
	$('#second_show').html('<s></s>'+second+'');
	intDiff--;
	}, 1000);
} 

$(function(){
	timer(intDiff);
});	
</script>


<!--瀑布流-->
<!--{src:"img.png",content:"巧克力",price:"￥85"}-->

<script>
window.onload=function(){
    imglocation('container','box');
    var json={"data":[{"src":"img/07.png",content:"天然营养富硒鸡蛋 年卡 30枚/月*12月",price:"￥85"},  {"src":"img/08.png"},{"src":"img/09.png"},{"src":"img/10.png"}]}
    window.onscroll=function(){
        if(load()){

            var content=document.getElementById('container');
            for(var i = 0 ; i < json.data.length; i ++){
                var ccContent=document.createElement('div');
                ccContent.className='box';
                content.appendChild(ccContent);
                var imgWarp=document.createElement('div');
                imgWarp.className='box_img';
                ccContent.appendChild(imgWarp);
                var img=document.createElement('img');
                img.src=json.data[i].src;
                imgWarp.appendChild(img);
            }

            imglocation('container','box');
        }
    }
}

function load(){
    var cParent=document.getElementById('container');
    var ccContent=getChildElement(cParent,'box');
    var lastTop=ccContent[ccContent.length-1].offsetTop;
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

    console.log(lastTop+":"+scrollTop+":"+pageHeight)
    if(lastTop<scrollTop+pageHeight){
        return true;
    }else{
        return false;
    }
}

function imglocation(parent,content){
    var cParent=document.getElementById(parent);   
    var ccContent=getChildElement(cParent,content);
    var imgWidth=ccContent[0].offsetWidth;
    var num=Math.floor(document.documentElement.clientWidth/imgWidth);
    //alert(imgWidth*cols)
    cParent.style.cssText='width:'+imgWidth*num+'px;margin:0 auto';

    
    //高度数组;
    var boxHeightArr=[];
    for(var i = 0 ; i < ccContent.length; i ++){
        if(i<num){            
            boxHeightArr[i]=ccContent[i].offsetHeight;
        }else{
            var minHeight=Math.min.apply(null,boxHeightArr);
            ccContent[i].style.position='absolute';
            //console.log(minHeight)
            ccContent[i].style.top=minHeight+'px';
            var minIndex=getMinPostioin(boxHeightArr,minHeight);
            ccContent[i].style.left=ccContent[minIndex].offsetLeft+'px';
            //关键点,改变数组；
            boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccContent[i].offsetHeight;
        }
    }
    //console.log(boxHeightArr)


}

function getMinPostioin(boxHeightArr,minHeight){
    for(var i = 0 ; i < boxHeightArr.length; i ++){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}

function getChildElement(parent,content){

    var contentArr=[];
    var allcontent=parent.getElementsByTagName("*");
    for(var i = 0 ; i < allcontent.length ; i++){
        if(allcontent[i].className==content){
            contentArr.push(allcontent[i])
        }
    }
    return contentArr;

}
        </script>
</html>
